<template>
  <div class="tableAll">
    <div class="addArea">
      <el-button class="add_btn" type="primary" @click="add">新增</el-button>
    </div>

    <div class="tableMain">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180">
        </el-table-column>
        <el-table-column prop="name" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <el-dialog style="width: 1000px;height: 1000px;" title="用户信息" :visible.sync="zdydialog">
      <el-form :model="form">
        <el-form-item label="编号" width="80px">
          <el-input class="dialog_input" v-model="form.id" ></el-input>
        </el-form-item>
        <el-form-item label="姓名" width="80px">
          <el-input class="dialog_input" v-model="form.name" ></el-input>
        </el-form-item>
        <el-form-item label="日期" width="80px">
          <el-date-picker  v-model="form.date" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" width="80px">
          <el-select class="dialog_input" v-model="form.address" placeholder="选择地址">
            <el-option label="猫窝" value="猫窝"></el-option>
            <el-option label="狗窝" value="狗窝"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
  // import { reformat } from '../common/reformartDate'

export default {
  name:"eltable",
  data() {
    return {
      tableData: [{
        id: '1001',
        name: 'Tom',
        date: '2019-11-26',
        address: '猫窝',
      }, {
        id: '1002',
        name: 'Jerry',
        date: '2019-11-26',
        address: '鼠洞',
      }, {
        id: '1003',
        name: 'Spike',
        date: '2019-11-26',
        address: '狗窝',
      },],
      zdydialog: false,

      formLabelWidth: '80px',
      form: {},
      submitType : "",
    }
  },
  methods: {
    add() {
      this.form = {
        id: '',
        name: '',
        date: '',
        address: ''
      }
      this.submitType = "add";
      this.zdydialog = true
    },
    submit() {
      //alert(this.form.date)
      // var ss = reformat(this.form.date)
      // alert(ss)
      this.zdydialog = false

      if(this.submitType == "add"){
        this.form.date = reformat(this.form.date);
        this.tableData.push(this.form)
      }else{

      }

    },
    handleEdit(index, row) {
      // this.form = this.tableData[index]
      this.submitType = "update";
      this.form = row
      this.zdydialog = true
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    cancel() {
      this.zdydialog = false
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  },
}
</script>


<style>
.tableAll{
  width:900px;
  height: 300px;
  /* border: red 1px solid; */
}
.addArea{
  height: 40px;
  width: 900px;
  /* border: red 1px solid; */
}
.add_btn{
  float: right;
  margin-right: 20px;
}
.dialog_input{
  width:220px;
}

</style>

